<template>
  <div>
    <div>
      <div class="top" @click="goMain">返回疫情地图</div>
      <img src="../../assets/images/防护物资.png" alt="防护物资">
    </div>
    <div class="menu">
      <div class="btn" :class="index !== 1 ? 'bc' : 'changeBc' " @click="changeStyle(1,'Xiaoduji')">消毒剂</div>
      <div class="btn" :class="index !== 2 ? 'bc' : 'changeBc' " @click="changeStyle(2, 'Kouzhao')">口罩</div>
      <div class="btn" :class="index !== 3 ? 'bc' : 'changeBc' " @click="changeStyle(3, 'Xishouye')">洗手液</div>
      <div class="btn" :class="index !== 4 ? 'bc' : 'changeBc' " @click="changeStyle(4, 'Wenduji')">温度计</div>
    </div>
    <div class="out">
      <div class="in">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
    import routerJump from '../../hooks/routerJump'
    import {useRouter} from 'vue-router'
    import {ref} from 'vue'

    export default {
        name: 'Fangyi',
        setup() {
          const router = useRouter()
          const {goMain} = routerJump()
          let index = ref(1)

          function changeStyle(i, name) {
            index.value = i
            // 路由跳转逻辑
            router.replace({
              name
            })
          }
          
          return {
            index,
            changeStyle,
            goMain
          }
        },
      }
</script>

<style lang="less" scoped>
  .top {
    position: absolute;
    top: 0.3rem;
    margin-left: 0.3rem;
    padding: 0 0.15rem;
    height: 0.4rem;
    background-color: rgba(0, 0, 0, .3);
    border-radius: 0.5rem;
    line-height: 0.4rem;
    font-size: 0.2rem;
    letter-spacing: 0.03rem;
    color: #fff;
  }

  .menu {
    display: flex;
    align-items: center;
    // justify-content: space-around;
    justify-content: center;
    margin-top: -0.03rem;
    width: 100%;
    height: 0.75rem;
    background-color: #3343ff;
    .btn {
      // margin-top: 0.5rem;
      margin: 0.43rem 0.13rem 0;
      width: 1.5rem;
      height: 0.43rem;
      color: #fff;
      text-align: center;
      line-height: 0.43rem;
      border-radius: 0.05rem;
      cursor: pointer;
    }
  }

  .bc {
    /* 背景色: 色相、饱和度、亮度、透明度 */
    background-color: hsla(0,0%,100%,.26);
  }

  .changeBc {
    background-color: #f78207;
  }

  img {
    width: 100%;
    vertical-align: bottom;
  }

  .out {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -0.03rem;
    padding: 0.3rem 0.08rem;
    background-color: #3343ff;
    .in { 
      padding: 0.08rem;
      background-color: #fff;
      width: 90%;
      // height: 3rem;
      border-radius: 0.07rem;
    }
  }

  // 轮播图
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>